<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Six Millions Blog</title>
    <meta name="description" content="百万的博客">
    <meta name="keywords" content="知识积累沉淀；常用框架；踩坑记录；学习笔记">
    <!--vue-->
    <script src="/js/vue@2.6.14.js"></script>
    <!--element-ui-->
    <link rel="stylesheet" href="/css/element-ui@2.15.6.css">
    <script src="/js/element-ui@2.15.6.js"></script>
    <!--api请求-->
    <script src="/js/axios@0.24.0.js"></script>
</head>

<body>
<div id="app">
    <el-container>
        <el-header>Blog</el-header>
        <el-main>
            <el-card class="box-card">
                <div v-for="repo in repoList" :key="repo.id" class="text item">
                    <el-descriptions title="仓库信息">
                        <el-descriptions-item label="名称">{{ repo.name }}</el-descriptions-item>
                        <el-descriptions-item label="Blog">
                            <a :href="'/docs.html?namespace=' + repo.namespace">点我</a>
                        </el-descriptions-item>
                        <el-descriptions-item label="描述">{{ repo.description }}</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>
        </el-main>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                //repoList
                repoList: [],
                doc: {}
            }
        },
        mounted: function () {
            var that = this;
                // get
                axios.get('/api/repo/list/sixmillions')
                .then(function (res) {
                    var data = res.data;
                    that.repoList = data;
                })
                .catch(function (error) {
                    console.log('请求失败处理' + error);
                });
        }
    })

</script>
<style>
    html, body {
        padding: 0;
        margin: 0
    }
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }
    body > .el-container {
        margin-bottom: 40px;
    }

</style>
</html>